<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
    :style="{ backgroundColor: contentStyle.backgroundColor }"
  >
    <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff" v-if="!editState">
      <template #title>
        <p
          style="color: #262626; margin: 0"
          v-for="(item, index) in formatStringBySemi(value)"
          :key="index"
        >
          {{ item }}
        </p>
      </template>
      <text-display-cell
        :has-native-title="false"
        :text="value"
        :columnConfig="columnsConfig"
        v-bind="contentStyle"
      />
    </a-tooltip>
    <a-input v-else :value="value" @change="handleValueChange" />
  </cell-wrapper>
</template>

<script>
  import { computed, defineComponent } from 'vue';
  import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
  import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
  import { generateContentStyle, judgeCellEditable } from '@/utils/index';

  export default defineComponent({
    name: 'ToolTipTableCell',
    components: {
      TextDisplayCell,
      CellWrapper,
    },
    inheritAttrs: false,
    props: {
      // 当前单元格的值
      value: {
        type: [String, Number, Boolean],
        default: () => {
          return null;
        },
      },
      // 单元格的默认样式
      defaultStyle: {
        type: Object,
        default: () => ({}),
      },
      // 单元格的条件样式配置
      conditionStyle: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 当前行的数据
      rowData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
      conditionValueMap: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前列的配置
      columnsConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前单元格是否处于编辑状态
      isEdit: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const editState = computed(() => {
        return (
          props.isEdit &&
          judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
        );
      });
      // 内容显示的样式
      const contentStyle = computed(() => {
        return generateContentStyle(
          props.columnsConfig.contentConfig,
          props.rowData,
          props.conditionValueMap,
        );
      });

      function handleValueChange(event) {
        emit('change', event.target.value);
      }
      const formatStringBySemi = (string) => {
        return string.split(/；(?!\n)|(?<!；)\n/g);
      };
      return {
        editState,
        contentStyle,
        handleValueChange,
        formatStringBySemi,
      };
    },
  });
</script>
